<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2022-04-23 21:19:09
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-04-23 22:36:14
-->
<template>
  <el-dialog
    :title="'维修清单'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :modal="false"
     width="1000px"
  >
    <div v-for="(item, index) in dataList" :key="index" class="box">
      <div class="title">{{ item.typeTrans }}</div>
      <div
        class="list"
        v-for="(_item, _index) in item.manifestTransLsit"
        :key="_index"
      >
        <span> {{ _item.trans }}</span
        ><span>{{ _item.cost }}元</span>
      </div>
    </div>
    <div class="total">总计:{{ price }}元</div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">缴费</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: "",
        repairId: ""
      },
      config: {},
      dataList: [],
      price: 0
    };
  },
  methods: {
    getDataList() {
      this.$http({
        url: this.$http.adornUrl(`/repair/info/${this.dataForm.repairId}`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.dataList = data.data.manifestLists;
          this.price = data.data.price;
        }
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    init(repairId, carId) {
      this.dataForm.carId = carId || 0;
      this.dataForm.repairId = repairId || 0;
      this.visible = true;
      this.getDataList();
    },

    // 表单提交
    dataFormSubmit() {
      this.$http({
        url: this.$http.adornUrl(`/repair/pay/${this.dataForm.repairId}`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code ===200) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visible = false;
              this.$emit("handeJiaofei");
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style scoped>
.box {
  margin-top: 20px;
}
.box .title {
  font-size: 18px;
  font-weight: 600;
}
.box .list {
  display: flex;
  justify-content: space-between;
}
.total {
  text-align: right;
  font-size: 20px;
  margin-top: 20px;
}
</style>
